<style>
    .form-row {
        padding-bottom: .5em;
    }

    .css-form input.ng-invalid.ng-dirty {
        background-color: #FA787E;
    }

    .css-form input.ng-valid.ng-dirty {
        background-color: #78FA89;
    }
</style>

<!-- TODO:  Add confirmation notification on save, should only be red on save pressed or on leave field.  Not automatically. -->

<div fade-in>

    <div class="container">
        <div class="form-row">
            <h3>
                Example of form validation and data binding.
            </h3>
            <hr>
        </div>
        <div class="well">
            <form novalidate class="container css-form">
                <div class="container form-row">
                    Name:&nbsp;&nbsp;&nbsp;<input class="form-control" type="text" ng-model="user.name" required/>
                </div>
                <div class="container form-row">
                    E-mail:&nbsp;&nbsp;&nbsp;<input class="form-control" type="email" ng-model="user.email"
                                                    required/><br/>
                </div>
                <div class="container form-row">
                    Gender:&nbsp;&nbsp;&nbsp;<input type="radio" ng-model="user.gender" value="male"/>&nbsp;Male
                    <input type="radio" ng-model="user.gender" value="female"/>&nbsp;Female<br/>
                </div>

                <div style="padding-top: 1em;" class="container form-row">
                    <a class="btn btn-primary" ng-click="user = '';">Reset</a>
                    &nbsp;&nbsp;&nbsp;
                    <a class="btn btn-primary" ng-click="saveForm(user)">Save</a>
                </div>
            </form>

        </div>
        <pre>form = {{user | json}}</pre>
        <pre>master = {{master | json}}</pre>

    </div>

</div>